<template>
  <el-tabs style="height: 100%" @tab-click="choose">
    <el-tab-pane
      v-for="(item, index) in dataList"
      :key="index"
      class="tab-item"
      :name="JSON.stringify(item)"
    >
      <template #label>
        <slot name="label" :row="item" :index="index"></slot>
      </template>
      <slot name="content" :row="item" :index="index" style="height: 100%"> ddd </slot>
    </el-tab-pane>

    <!-- </template> -->
  </el-tabs>
</template>

<script lang="ts" setup>
import { defineProps, PropType, ref } from "vue";
import { friedsLists } from "@/store/chat/types";
import { computed } from "vue";
import { newUseStore } from "@/store";
const store = newUseStore();

const props = defineProps({
  dataList: {
    type: Array as PropType<friedsLists[]>,
    default: () => [],
  },
});

const choose = (e: any) => {
  console.log("切换，", JSON.parse(e.props.name));

  store.commit("moduleChat/changeCurrentChatFriend", JSON.parse(e.props.name).id);

  // const userId = computed(() => store.state.moduleUser.userInfo.id);
  const userId = store.state.moduleUser.userInfo.id;

  const friendId = computed(() => store.state.moduleChat.currentChatId).value;

  store.dispatch(store.lsActions.moduleChat.getCurrentChat(), {
    userId,
    friendId,
  });
};
</script>

<style lang="less">
// .tab-item {
//   margin-top: 20vh;
// }

.el-tabs--right.el-tabs--card .el-tabs__item.is-right {
  padding-top: 3vh;
  padding-bottom: 5vh;
  box-sizing: border-box;
}

.el-tabs__content {
  height: 100%;
}
</style>
